<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorate="~{/layout}">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>安全设置</title>

		<div th:replace="commons/css/css_personal::personal_css"></div>
		<link th:href="@{/personal/css/infstyle.css}" rel="stylesheet" type="text/css">
		<div th:replace="commons/css/css_header_footer :: public_css1"></div>
		<div th:replace="commons/js/js_header_footer :: public_js1"></div>
		<div th:replace="commons/js/js_personal::personal_js"></div>
	</head>

	<body>
		<!--头 -->
		<div th:replace="commons/header::public_header"></div>

		<!-- Preloader -->
		<div id="preloader" class="preloader">
			<div class="loader-cube">
				<div class="loader-cube__item1 loader-cube__item"></div>
				<div class="loader-cube__item2 loader-cube__item"></div>
				<div class="loader-cube__item4 loader-cube__item"></div>
				<div class="loader-cube__item3 loader-cube__item"></div>
			</div>
		</div>
		<!-- End Preloader -->

			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<!--标题 -->
					<div class="user-safety">
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账户安全</strong> / <small>Set&nbsp;up&nbsp;Safety</small></div>
						</div>
						<hr/>

						<!--头像 -->
						<div class="user-infoPic">
							<input type="hidden" id="picPath" th:value="${session.user.picpath}">
							<div class="filePic">
								<div id="thisImage">

								</div>
								<!--<img class="am-circle am-img-thumbnail" th:src="@{/personal/images/getAvatar.do.jpg}" alt="" />-->
							</div>

							<p class="am-form-help">头像</p>

							<div class="info-m">
								<div><b>用户名：<i><span th:text="${session.user.username}"></span></i></b></div>
								<div class="u-level">
									<span class="rank r2">
							             <s class="vip1"></s><a class="classes" href="#">铜牌会员</a>
						            </span>
								</div>
								<div class="u-safety">
									<a href="safety.html">
									 账户安全
									<span class="u-profile"><i class="bc_ee0000" style="width: 60px;" width="0">60分</i></span>
									</a>
								</div>
							</div>
						</div>

						<div class="check">
							<ul>
								<li>
									<i class="i-safety-lock"></i>
									<div class="m-left">
										<div class="fore1">登录密码</div>
										<div class="fore2"><small>为保证您购物安全，建议您定期更改密码以保护账户安全。</small></div>
									</div>
									<div class="fore3">
										<a th:href="@{/users/password}">
											<div class="am-btn am-btn-secondary">修改</div>
										</a>
									</div>
								</li>
								<li>
									<i class="i-safety-wallet"></i>
									<div class="m-left">
										<div class="fore1">支付密码</div>
										<div class="fore2"><small>启用支付密码功能，为您资产账户安全加把锁。</small></div>
									</div>
									<div class="fore3">
										<a href="setpay.html">
											<div class="am-btn am-btn-secondary">立即启用</div>
										</a>
									</div>
								</li>
								<li>
									<i class="i-safety-iphone"></i>
									<div class="m-left">
										<div class="fore1">手机验证</div>
										<div class="fore2"><small>您验证的手机：186XXXXXXXX 若已丢失或停用，请立即更换</small></div>
									</div>
									<div class="fore3">
										<a href="bindphone.html">
											<div class="am-btn am-btn-secondary">换绑</div>
										</a>
									</div>
								</li>
								<li>
									<i class="i-safety-mail"></i>
									<div class="m-left">
										<div class="fore1">邮箱验证</div>
										<div class="fore2"><small>您验证的邮箱：5831XXX@qq.com 可用于快速找回登录密码</small></div>
									</div>
									<div class="fore3">
										<a href="email.html">
											<div class="am-btn am-btn-secondary">换绑</div>
										</a>
									</div>
								</li>
								<li>
									<i class="i-safety-idcard"></i>
									<div class="m-left">
										<div class="fore1">实名认证</div>
										<div class="fore2"><small>用于提升账号的安全性和信任级别，认证后不能修改认证信息。</small></div>
									</div>
									<div class="fore3">
										<a href="idcard.html">
											<div class="am-btn am-btn-secondary">认证</div>
										</a>
									</div>
								</li>
								<li>
									<i class="i-safety-security"></i>
									<div class="m-left">
										<div class="fore1">安全问题</div>
										<div class="fore2"><small>保护账户安全，验证您身份的工具之一。</small></div>
									</div>
									<div class="fore3">
										<a href="question.html">
											<div class="am-btn am-btn-secondary">认证</div>
										</a>
									</div>
								</li>
							</ul>
						</div>

					</div>
				</div>
				<!--底部-->
				<div th:replace="commons/personal_footer::personal_footer"></div>
			</div>

			<div th:replace="commons/personal_footer::personal_menu"></div>
		</div>

	</body>

<script>
    $(document).ready(function () {
        changeStatus();
        //显示头像
        var picPath = document.getElementById("picPath").value;
        if(picPath == null || picPath == ""){
            var picPath = "/personal/images/getAvatar.do.jpg";
            $("#thisImage").append($("<img/>").prop('id',"path").attr("src",picPath).addClass("am-circle am-img-thumbnail"));
        }
        else {
            $("#thisImage").append($("<img/>").prop('id',"path").attr("src",/pictures/+picPath).addClass("am-circle am-img-thumbnail"));
        }
    })

    function changeStatus() {
        $("#li_secure").addClass("active");
    }
</script>

</html>